<template>
  <view class="RentalDetails">
    <view class="demo-nav">
      <view class="demo-nav__title">商品详情</view>
      <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
        <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
      </svg>
      <van-icon class="demo-nav__right" name="share-o" size="20" color="#000000"/>
    </view>
    <!-- <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image"/>
      </van-swipe-item>
    </van-swipe> -->
	<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
		<swiper-item v-for="(image, index) in images" :key="index">
			<image src="" v-lazy="image" mode=""></image>
		</swiper-item>
	</swiper>
    <view class="RentalDetails-details-a" align="left">
      <view style="font-size: 1rem">{{this.rental.rentalName}}</view>
    </view>
    <view class="RentalDetails-details-b">
      <van-row>
        <van-col text="18" style="text-align: left">
          <view style="color: red;font-size:1.2rem">￥{{this.rental.rentalPrice}}元<text style="color: black;font-size: 0.5rem">起</text></view>
        </van-col>
      </van-row>
    </view>
    <van-viewider/>
    <view class="RentalDetails-details-c" align="left">
      <view style="font-size: 1rem"><van-icon name="balance-o"  size="16"/>已缴纳******保证金</view>
      <van-row type="flex">
        <van-col text="6"><van-icon size="14" name="passed" color="blue"/>质量保障</van-col>
        <van-col text="6"><van-icon name="passed" color="blue"/>优质服务</van-col>
        <van-col text="10"><van-icon name="passed" color="blue"/>七天无理由退货</van-col>
      </van-row>
    </view>
    <van-viewider/>
    <view class="RentalDetails-details-f">
      <van-row>
        <van-col text="3">请选择</van-col>
        <van-col text="16"  style="text-align: left" >选择 规格</van-col>
        <van-col text="3"><van-icon name="arrow" size="14" style="position: absolute;right: 1rem;"/></van-col>
      </van-row>
    </view>
    <van-viewider/>
    <view class="RentalDetails-details-i" align="center" style="margin-bottom: 60px">
      <h1 style="font-size: 1.3rem">服务内容</h1>
      <br>
      <view style="font-size: 1rem;text-align: left">{{rental.descript}}</view>
    </view>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
    <!--  <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="onClickButton"
      /> -->
	 <view class="gm" style="width:400rpx;height: 80rpx;background-color: #f83d2d;border-radius: 40rpx;color: #fff;text-align: center;line-height: 80rpx;" @click="onClickButton" >
	  	<text>立即购买</text> 
	  </view>
    </van-goods-action>

    <van-sku
      align="left"
      v-model="show"
      :sku="sku"
      :goods="goods_info"
      :goods-id="goods_id"
      :hide-stock="sku.hide_stock"
      :quota="quota"
      :quota-used="quota_used"
      reset-stepper-on-hide
      reset-selected-sku-on-hide
      :initial-sku="initialSku"
      disable-stepper-input
      :close-on-click-overlay="closeOnClickOverlay"
      :custom-sku-validator="customSkuValidator"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"/>  <!-- disable-stepper-input  数字框左右的数字框可以按 里面的数字不能手动输入 -->

  </view>
</template>

<script>

  import { Toast } from 'vant';
  import {
    selectRentalServiceById,
    insertOrderMaster,
    insertOrderDetail
  } from '@/api/constructionTeam/rental.js'

  export default {
    name: "RentalDetails",
    data(){
      return{
        images: [
          'https://img.yzcdn.cn/vant/apple-1.jpg',
          'https://img.yzcdn.cn/vant/apple-2.jpg',
        ],
        current: 0,
        rental :Object,
        show: false,
        sku: {
          // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
          // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
          tree: [
            {
              k: '规格',
              k_s: 's1',
              v: [],
            },
          ],
          // 所有 sku 的组合列表，如下是：白色1、白色2、天蓝色1、天蓝色2
          list: [],
          price: '',  //？？
          stock_num: 9999, // 商品总库存？？
          none_sku: false,  // 是否无规格商品 false正常显示那些可供选择的标准，此处是颜色和尺寸
          hide_stock: true,  // 是否隐藏剩余库存 false正常显示剩余多少件的那个库存
        },
        initialSku:{
          // 键：skuKeyStr（sku 组合列表中当前类目对应的 key 值）
          // 值：skuValueId（规格值 id）
          s1: '1',
          // 初始选中数量
          selectedNum: 1,
        },
        goods_id: '',
        quota: 3, //限购数量 库存旁边显示限购数
        quota_used: 0,  //已经购买过的数量 和下方的数字选择框显示不一样 与限购数量是相对应的 0数字选择框显示3   1 -- 2   2 -- 1  3 -- 0
        goods_info: {
          title: '',
          picture:'https://img.yzcdn.cn/vant/apple-1.jpg'  //图片这个我有点混乱
        },
        showBase: true,    //sku的框的显示
        showCustom: false,
        showStepper: false,
        showSoldout: false,
        closeOnClickOverlay: true,  //点击空白处关闭购物框
        // 订单表门店配送表单
        formMaster:{},
        // 订单详情表表单
        formDetail:{},
      }
    },
    created() {
      let id = parseInt(this.$route.query.rentalId);
      this.getRentalById(id);
    },
    methods:{
      toBack(){
        this.$router.go(-1);//返回上一层
      },
      getRentalById(rentalId){
        selectRentalServiceById(rentalId).then((res) => {
          console.log(res.data.rentalLabel);
          this.rental = res.data.rentalService;
          for (let i = 0; i < res.data.rentalLabel.length; i++){
            this.sku.tree[0].v.push({ "id": res.data.rentalLabel[i].labelId,"name":res.data.rentalLabel[i].labelName,"imgUrl":res.data.rentalLabel[i].rentalPic.rentalUrl});
            this.sku.list.push({ "id": null,"price":(res.data.rentalLabel[i].labelPrice)*100,"discount":null,
              "s1":res.data.rentalLabel[i].labelId,"stock_num":9999,"goods_id":res.data.rentalLabel[i].rentalId});
            this.goods_id = res.data.rentalLabel[i].rentalId;
          }
        })
      },
      customSkuValidator(){

      },
      onBuyClicked(sku) {
        console.log(JSON.stringify(sku));
        this.formMaster.orderMoney = parseFloat(JSON.stringify(sku.selectedSkuComb.price))/100;
        this.formMaster.paymentMoney = parseFloat(JSON.stringify(sku.selectedSkuComb.price))/100;
        insertOrderMaster(this.formMaster).then((res) =>{
          console.log(res.data);
          this.formDetail.orderId = res.data.data;
          this.formDetail.productName = this.rental.rentalName;
          this.formDetail.productCnt = JSON.stringify(sku.selectedNum);
          this.formDetail.productPrice = parseFloat(JSON.stringify(sku.selectedSkuComb.price))/100;
          insertOrderDetail(this.formDetail).then((res2) =>{
            console.log(res2.data);
            if(res2.data.code == 200){
              this.$router.push({path:"/MaterialPay",query:{orderId:res.data.data,totalPrice:parseFloat(JSON.stringify(sku.selectedSkuComb.price))/100}});
            }
          })
        })
        // this.$router.push({path:"/OrderDetails",query:{skuId: sku.selectedSkuComb.s1,productId:this.product.productId,selectedNum:sku.selectedNum}});
        // this.$router.push({path:"/PaymentDetails",query:{skuId: sku.selectedSkuComb.s1,productId:this.product.productId,selectedNum:sku.selectedNum}});
      },
      onAddCartClicked(sku) {
        this.$toast('add cart:' + JSON.stringify(sku));
      },
      // 联系客服
      onClickIcon() {
        Toast('已发送消息');
      },
      // 立即购买
      onClickButton() {
        this.show = true;
      },
    },
  }
</script>

<style scoped>
  .RentalDetails{
    color: black;
  }
  .demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 56px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .demo-nav__right{
    position: absolute;
    top: 18px;
    right: 16px;
  }
  .RentalDetails-details-a{
    padding: 0.5rem 1rem;
  }
  .RentalDetails-details-a p{
    font-size: 0.8rem;
  }
  .RentalDetails-details-b{
    padding: 0 1rem;
  }
  .RentalDetails-details-c{
    padding: 0.3rem 1rem;
  }
  .RentalDetails-details-c p{
    font-size: 0.75rem;
    padding: 0.2rem 0;
  }
  .RentalDetails-details-f{
    padding: 0.3rem 1rem;
    font-size: 0.5rem;
    position: relative
  }
  .RentalDetails-details-i{
    padding: 0.3rem 1rem;
  }
  .RentalDetails-details-i p{
    font-size: 0.6rem;
  }
</style>
